React 中的 TypeScript

npx create-vite

project/
├── index.html
├── package.json
├── src/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

npm install create-react-app -g
create-react-app your-project --template=typescript

// 值导入
import { FC } from "react";

// 类型导入（推荐）
import type { FC } from "react";

/// <reference types="vite/client" />

/// <reference lib="dom" />
/// <reference path="./types/importMeta.d.ts" />

// CSS Modules
type CSSModuleClasses = { readonly [key: string]: string }

declare module '*.module.css' {
  const classes: CSSModuleClasses
  export default classes
}

// CSS 文件
declare module '*.css' {
  const css: string
  export default css
}

// 图片资源
declare module '*.jpg' {
  const src: string
  export default src
}

// 字体文件
declare module '*.woff' {
  const src: string
  export default src
}

// vite-env.d.ts
import * as ViteClientEnv from 'vite/client';
// 或使用 type-only 导入
import type * as ViteClientEnv from 'vite/client';

// 无 props
const Container = () => {
  return <p>林不渡！</p>;
};

// 有 props
export interface IContainerProps {
  visible: boolean;
  controller: () => void;
}

const Container = (props: IContainerProps) => {
  return <p>林不渡！</p>;
};

// 带默认值
const Container = ({
  visible = false,
  controller = () => {},
}: IContainerProps) => {
  return <p>林不渡！</p>;
};

import React from 'react';

export interface IContainerProps {
  visible: boolean;
  controller: () => void;
}

const Container: React.FC<IContainerProps> = ({
  visible = false,
  controller = () => {},
}) => {
  return <p>林不渡！</p>;
};

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}

type PropsWithChildren<P> = P & { children?: ReactNode | undefined };

import { PropsWithChildren } from 'react';

interface ICellProps<TData> {
  field: keyof TData;
}

const Cell = <T extends Record<string, any>>(
  props: PropsWithChildren<ICellProps<T>>
) => {
  return <p></p>;
};

// 使用示例
interface IDataStruct {
  name: string;
  age: number;
}

const App = () => {
  return (
    <>
      {/* field 只能是 'name' 或 'age' */}
      <Cell<IDataStruct> field='name' />
      <Cell<IDataStruct> field='age' />
    </>
  );
};

const Container = () => {
  // 隐式推导：string 类型
  const [state1, setState1] = useState('linbudu');
  
  // 显式泛型 + 无初始值：string | undefined
  const [state2, setState2] = useState<string>();
  
  // 显式泛型 + 初始值：string
  const [state3, setState3] = useState<string>('linbudu');
};

// 提供初始值
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

// 无初始值
function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

interface IData {
  name: string;
  age: number;
}

// ❌ 不推荐：类型断言会丢失检查
const [data, setData] = useState<IData>({} as IData);

// ✅ 推荐：使用 Partial 标记可选
const [data, setData] = useState<Partial<IData>>({});

// 使用时需要判空
if (data.name && data.age) {
  console.log(data.name, data.age);
}

// 方式一：ReturnType
type State = ReturnType<typeof useState<number>>;

// 方式二：直接提取
type StateType = [number, React.Dispatch<React.SetStateAction<number>>];

const Container = () => {
  // 隐式推导
  const handler1 = useCallback((input: number) => {
    return input > 599;
  }, []);
  // 类型：(input: number) => boolean

  // 显式泛型
  const handler2 = useCallback<(input: number, compare: boolean) => boolean>(
    (input) => {
      return input > 599;
    },
    []
  );
  // 注意：显式泛型可能与实际参数不匹配，需谨慎使用
};

const Container = () => {
  // 隐式推导
  const result1 = useMemo(() => {
    return 'some-expensive-process';
  }, []);
  // 类型：string

  // 显式泛型约束返回值
  const result2 = useMemo<{ name?: string }>(() => {
    return {};
  }, []);
  // 类型：{ name?: string }
};

import { useReducer } from 'react';

// 状态定义
const initialState = { count: 0 };

// Action 类型（使用可辨识联合类型）
type Actions =
  | {
      type: 'inc';
      payload: {
        count: number;
        max?: number;
      };
    }
  | {
      type: 'dec';
      payload: {
        count: number;
        min?: number;
      };
    };

// Reducer 函数
function reducer(state: typeof initialState, action: Actions) {
  switch (action.type) {
    case 'inc':
      return {
        count: action.payload.max
          ? Math.min(state.count + action.payload.count, action.payload.max)
          : state.count + action.payload.count,
      };
    case 'dec':
      return {
        count: action.payload.min
          ? Math.max(state.count - action.payload.count, action.payload.min)
          : state.count - action.payload.count,
      };
    default:
      throw new Error('Unexpected Action Received.');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <>
      Count: {state.count}
      <button
        onClick={() =>
          dispatch({ type: 'dec', payload: { count: 5, min: 0 } })
        }
      >
        -(min: 0)
      </button>
      <button
        onClick={() =>
          dispatch({
            type: 'inc',
            payload: { count: 5, max: 100 },
          })
        }
      >
        +(max: 100)
      </button>
    </>
  );
}

type Reducer<S, A> = (prevState: S, action: A) => S;
type ReducerState<R extends Reducer<any, any>> = 
  R extends Reducer<infer S, any> ? S : never;

function useReducer<R extends Reducer<any, any>>(
  reducer: R,
  initialState: ReducerState<R>,
): [ReducerState<R>, Dispatch<ReducerAction<R>>];

const Container = () => {
  // DOM 引用（RefObject）
  const domRef = useRef<HTMLDivElement>(null);
  
  // 值引用（MutableRefObject）
  const valueRef = useRef<number>(0);

  const operateRef = () => {
    // DOM 操作
    domRef.current?.getBoundingClientRect();
    
    // 值修改
    valueRef.current += 1;
  };

  return (
    <div ref={domRef}>
      <p>林不渡</p>
    </div>
  );
};

// 有初始值（非 null）：可变引用
function useRef<T>(initialValue: T): MutableRefObject<T>;

// 初始值为 null：不可变引用
function useRef<T>(initialValue: T | null): RefObject<T>;

// 无初始值
function useRef<T = undefined>(): MutableRefObject<T | undefined>;

useRef<HTMLInputElement>(null);      // input 元素
useRef<HTMLDivElement>(null);       // div 元素
useRef<HTMLButtonElement>(null);    // button 元素
useRef<HTMLTextAreaElement>(null);  // textarea 元素
useRef<HTMLCanvasElement>(null);    // canvas 元素

import {
  useRef,
  useImperativeHandle,
  forwardRef,
} from 'react';

// 定义暴露给父组件的方法
interface IRefPayload {
  controller: () => void;
}

// 父组件
const Parent = () => {
  const childRef = useRef<IRefPayload>(null);

  const invokeController = () => {
    childRef.current?.controller();
  };

  return (
    <>
      <Child ref={childRef} />
      <button onClick={invokeController}>调用子组件方法</button>
    </>
  );
};

// 子组件
interface IChildProps {}

const Child = forwardRef<IRefPayload, IChildProps>((props, ref) => {
  const internalController = () => {
    console.log('子组件方法被调用');
  };

  useImperativeHandle(ref, () => ({
    controller: internalController,
  }));

  return <p>子组件</p>;
});

// forwardRef 泛型参数
forwardRef<RefType, PropsType>

// useImperativeHandle 泛型参数
useImperativeHandle<RefType, HandleType>

import { useState } from 'react';
import type { 
  ChangeEvent, 
  MouseEvent, 
  KeyboardEvent,
  FormEvent,
  FocusEvent 
} from 'react';

const Container = () => {
  const [value, setValue] = useState('');

  // ChangeEvent：表单值变化
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  // MouseEvent：鼠标事件
  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
    console.log('点击位置:', event.clientX, event.clientY);
  };

  // KeyboardEvent：键盘事件
  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      console.log('回车键按下');
    }
  };

  // FormEvent：表单提交
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log('表单提交');
  };

  // FocusEvent：焦点事件
  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
    console.log('获得焦点');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={value} 
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        onFocus={handleFocus}
      />
      <button onClick={handleClick}>提交</button>
    </form>
  );
};

import type { ChangeEventHandler, MouseEventHandler } from 'react';

// 使用函数类型签名
const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
  // e 自动推导为 ChangeEvent<HTMLInputElement>
};

const handleClick: MouseEventHandler<HTMLButtonElement> = (e) => {
  // e 自动推导为 MouseEvent<HTMLButtonElement>
};

type ChangeEventHandler<T = Element> = (event: ChangeEvent<T>) => void;
type MouseEventHandler<T = Element> = (event: MouseEvent<T>) => void;
type KeyboardEventHandler<T = Element> = (event: KeyboardEvent<T>) => void;
type FormEventHandler<T = Element> = (event: FormEvent<T>) => void;
type FocusEventHandler<T = Element> = (event: FocusEvent<T>) => void;

import type { CSSProperties } from 'react';

export interface IContainerProps {
  style: CSSProperties;
}

// 样式对象
const styles: CSSProperties = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '#fff',
  padding: '16px',
};

const Container = ({ style }: IContainerProps) => {
  return <p style={style}>林不渡！</p>;
};

import type { ComponentProps } from 'react';

interface IButtonProps extends ComponentProps<'button'> {
  size?: 'small' | 'large';
  variant?: 'primary' | 'secondary';
}

const Button = (props: IButtonProps) => {
  return <button {...props}>{props.children}</button>;
};

// 使用时可传入所有 button 原生属性
<Button 
  size="large" 
  variant="primary"
  onClick={() => {}}
  disabled={false}
  type="submit"
>
  按钮
</Button>

import { Button } from "ui-lib";
import type { ComponentProps } from 'react';

// 提取第三方组件的属性类型
interface IEnhancedButtonProps extends ComponentProps<typeof Button> {
  loading?: boolean;
}

const EnhancedButton = (props: IEnhancedButtonProps) => {
  return <Button {...props} />;
};

// 包含 ref
type PropsWithRef = ComponentPropsWithRef<'input'>;

// 不包含 ref
type PropsWithoutRef = ComponentPropsWithoutRef<'input'>;

// 自动判断
type Props = ComponentProps<'input'>;

// ReactElement：有效的 JSX 元素
interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key: Key | null;
}

// ReactNode：更宽泛的渲染内容
type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
type ReactNode = 
  | ReactChild 
  | ReactFragment 
  | ReactPortal 
  | boolean 
  | null 
  | undefined;

// PropsWithChildren 使用 ReactNode
type PropsWithChildren<P> = P & { children?: ReactNode | undefined };

// FC 返回 ReactElement 或 null
interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
}

PROJECT/
├── src/
│   ├── types/
│   │   ├── shared.ts      # 共享基础类型
│   │   ├── user.ts        # 用户模块类型
│   │   ├── product.ts     # 产品模块类型
│   │   ├── request.ts     # 请求相关类型
│   │   └── utils.ts       # 工具类型
│   └── typings.d.ts       # 全局类型声明
└── tsconfig.json

// 基础联合类型
export type Status = 'pending' | 'success' | 'error';

// 通用工具类型
export type Nullable<T> = T | null;

// 通用分页参数
export interface IPaginationParams {
  page: number;
  pageSize: number;
}

// user.ts
import type { Status } from './shared';

export interface IUserProfile {
  id: string;
  name: string;
  email: string;
  status: Status;
}

export interface IUserListParams {
  keyword?: string;
  status?: Status;
}

import type { Status } from './shared';

// 通用响应结构
export interface IApiResponse<TData = never> {
  status: Status;
  code: number;
  message: string;
  data: TData;
}

// 分页响应结构
export interface IPaginatedResponse<TData = never> {
  status: Status;
  data: TData[];
  pagination: {
    page: number;
    pageSize: number;
    total: number;
  };
}

// api/user.ts
import type { IApiResponse, IPaginatedResponse } from '@/types/request';
import type { IUserProfile, IUserListParams } from '@/types/user';

export function fetchUserDetail(id: string): Promise<IApiResponse<IUserProfile>> {
  return fetch(`/api/users/${id}`).then(res => res.json());
}

export function fetchUserList(params: IUserListParams): Promise<IPaginatedResponse<IUserProfile>> {
  return fetch('/api/users', { 
    method: 'POST',
    body: JSON.stringify(params) 
  }).then(res => res.json());
}

// 非 JS 模块声明
declare module '*.svg' {
  const content: string;
  export default content;
}

// 全局变量声明
declare global {
  interface Window {
    __APP_CONFIG__: {
      apiBaseUrl: string;
    };
  }
}

// 第三方库声明
declare module 'some-untyped-lib' {
  export function init(options: { apiKey: string }): void;
}

// Parent.tsx
import { ChildA } from './ChildA';
import { ChildB } from './ChildB';

// 被多个子组件共享的类型
export interface ISharedData {
  id: string;
  value: number;
}

const Parent = () => {
  const data: ISharedData = { id: '1', value: 100 };

  return (
    <>
      <ChildA data={data} />
      <ChildB data={data} />
    </>
  );
};

// ChildA.tsx
import type { ISharedData } from './Parent';

interface IChildAProps {
  data: ISharedData;
}

export const ChildA = ({ data }: IChildAProps) => {
  return <div>{data.id}</div>;
};

// ChildB.tsx
import type { ISharedData } from './Parent';

interface IChildBProps {
  data: ISharedData;
}

export const ChildB = ({ data }: IChildBProps) => {
  return <div>{data.value}</div>;
};

// ✅ 推荐：简单函数 + 返回值标注
const Container = (props: IProps): JSX.Element => {
  return <div>{props.name}</div>;
};

// ❌ 不推荐：FC 类型
const Container: FC<IProps> = (props) => {
  return <div>{props.name}</div>;
};

interface IData {
  name: string;
  age: number;
}

// ❌ 不推荐：类型断言
const [data, setData] = useState<IData>({} as IData);

// ✅ 推荐方案一：Partial
const [data, setData] = useState<Partial<IData>>({});

// ✅ 推荐方案二：可空类型
const [data, setData] = useState<IData | null>(null);

// ✅ 推荐方案三：提供完整默认值
const [data, setData] = useState<IData>({
  name: '',
  age: 0,
});

// DOM 引用（推荐）
const inputRef = useRef<HTMLInputElement>(null);
const divRef = useRef<HTMLDivElement>(null);

// 值引用
const countRef = useRef<number>(0);
const timerRef = useRef<NodeJS.Timeout | null>(null);

// 类实例引用
class MyService {}
const serviceRef = useRef<MyService>(new MyService());

// 使用时的类型守卫
if (inputRef.current) {
  inputRef.current.focus(); // 类型安全
}

// 方式一：参数类型标注（推荐）
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

// 方式二：函数类型签名
const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
  setValue(e.target.value);
};

// 方式三：内联标注（简单场景）
<input onChange={(e: ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
}} />

import { Button } from 'antd';
import type { ComponentProps } from 'react';

// 提取属性类型
type AntdButtonProps = ComponentProps<typeof Button>;

// 扩展属性
interface ICustomButtonProps extends AntdButtonProps {
  loading?: boolean;
}

const CustomButton = ({ loading, ...props }: ICustomButtonProps) => {
  return (
    <>
      {loading && <Spinner />}
      <Button {...props} />
    </>
  );
};

import { forwardRef } from 'react';

interface IInputProps {
  label: string;
}

// forwardRef<RefType, PropsType>
const CustomInput = forwardRef<HTMLInputElement, IInputProps>(
  ({ label, ...props }, ref) => {
    return (
      <div>
        <label>{label}</label>
        <input ref={ref} {...props} />
      </div>
    );
  }
);

// 使用
const App = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  return <CustomInput ref={inputRef} label="用户名" />;
};

// ✅ 推荐：type-only 导入
import type { FC, ChangeEvent, CSSProperties } from 'react';
import type { IUserProfile } from '@/types/user';

// ✅ 推荐：混合导入时分离
import { useState, useEffect } from 'react';
import type { ChangeEvent } from 'react';

// ❌ 不推荐：混合导入
import { useState, ChangeEvent } from 'react';

// ✅ 推荐：显式标注返回值
const Container = (): JSX.Element => {
  return <div>内容</div>;
};

// ✅ 推荐：带 props 的组件
const Container = ({ name }: IProps): JSX.Element => {
  return <div>{name}</div>;
};

// ✅ 推荐：可能返回 null
const Container = ({ show }: IProps): JSX.Element | null => {
  if (!show) return null;
  return <div>内容</div>;
};

// ✅ 推荐：提取事件处理函数
const Container = () => {
  const handleClick = (e: MouseEvent<HTMLButtonElement>): void => {
    e.preventDefault();
    console.log('点击');
  };

  return <button onClick={handleClick}>按钮</button>;
};

// ❌ 不推荐：复杂的内联处理
const Container = () => {
  return (
    <button onClick={(e: MouseEvent<HTMLButtonElement>) => {
      // 大量逻辑...
    }}>
      按钮
    </button>
  );
};

// 基础类型
interface IBaseEntity {
  id: string;
  createdAt: Date;
  updatedAt: Date;
}

// 继承扩展
interface IUser extends IBaseEntity {
  name: string;
  email: string;
}

// 泛型工具类型
type ApiResponse<T> = {
  data: T;
  status: 'success' | 'error';
};

// 条件类型
type Nullable<T> = T extends undefined ? T | null : T;

// React 18 之前
const Container: FC<IProps> = (props) => {
  return <div>{props.children}</div>; // children 存在但未声明
};

// React 18 之后
const Container: FC<IProps> = (props) => {
  return <div>{props.children}</div>; // ❌ 报错：children 不存在
};

interface IProps {
  children?: ReactNode;
}

const Container: FC<IProps> = ({ children }) => {
  return <div>{children}</div>;
};

// 使用 FC 需要交叉类型
const Table: React.FC<{}> & {
  Column: React.FC<IColumnProps>;
} = () => {
  return <></>;
};

// 使用简单函数更直接
const Table = (): JSX.Element => {
  return <></>;
};
Table.Column = Column;

// 已废弃
interface VoidFunctionComponent<P = {}> {
  (props: P, context?: any): ReactElement<any, any> | null;
}

// 使用 FC + 显式 children 或使用简单函数

import React, { createContext, useContext } from 'react';

interface IThemeContext {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<IThemeContext | undefined>(undefined);

const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [theme, setTheme] = React.useState<'light' | 'dark'>('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

const ThemedButton = () => {
  const { theme, toggleTheme } = useTheme();
  return (
    <button
      onClick={toggleTheme}
      style={{ background: theme === 'light' ? '#fff' : '#333' }}
    >
      Toggle Theme
    </button>
  );
};

interface IUserContext {
  user: { name: string } | null;
  login: (name: string) => void;
  logout: () => void;
}

const defaultUserContext: IUserContext = {
  user: null,
  login: () => {},
  logout: () => {},
};

const UserContext = createContext<IUserContext>(defaultUserContext);

const UserContext = createContext<IUserContext>({} as IUserContext);

const UserContext = createContext<IUserContext | null>(null);

const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};

import React, { createContext, useContext, useReducer, ReactNode } from 'react';

interface State {
  count: number;
}

type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset'; payload: number };

interface ICounterContext {
  state: State;
  dispatch: React.Dispatch<Action>;
}

const initialState: State = { count: 0 };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: action.payload };
    default:
      return state;
  }
}

const CounterContext = createContext<ICounterContext | undefined>(undefined);

interface CounterProviderProps {
  children: ReactNode;
}

export const CounterProvider: React.FC<CounterProviderProps> = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
};

export const useCounter = () => {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error('useCounter must be used within a CounterProvider');
  }
  return context;
};

import { useState, useEffect } from 'react';

interface IUseFetchResult<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
}

function useFetch<T>(url: string): IUseFetchResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  const fetchData = async () => {
    setLoading(true);
    try {
      const response = await fetch(url);
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err : new Error('Unknown error'));
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [url]);

  return { data, loading, error, refetch: fetchData };
}

interface IUser {
  id: number;
  name: string;
  email: string;
}

const UserProfile = () => {
  const { data: user, loading, error } = useFetch<IUser>('/api/user/1');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{user?.name}</div>;
};

interface IUseLocalStorageOptions<T> {
  serializer?: (value: T) => string;
  deserializer?: (value: string) => T;
}

function useLocalStorage<T>(
  key: string,
  initialValue: T,
  options?: IUseLocalStorageOptions<T>
): [T, (value: T | ((prev: T) => T)) => void] {
  const serializer = options?.serializer ?? JSON.stringify;
  const deserializer = options?.deserializer ?? JSON.parse;

  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? deserializer(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = (value: T | ((prev: T) => T)) => {
    const valueToStore = value instanceof Function ? value(storedValue) : value;
    setStoredValue(valueToStore);
    window.localStorage.setItem(key, serializer(valueToStore));
  };

  return [storedValue, setValue];
}

const ThemeToggle = () => {
  const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light');

  return (
    <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
      Current: {theme}
    </button>
  );
};

interface IUseDebounceOptions {
  delay?: number;
  leading?: boolean;
}

function useDebounce<T extends (...args: any[]) => any>(
  callback: T,
  options: IUseDebounceOptions = {}
): T {
  const { delay = 300, leading = false } = options;
  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const leadingRef = useRef(true);

  const debouncedCallback = useCallback(
    (...args: Parameters<T>) => {
      if (leading && leadingRef.current) {
        callback(...args);
        leadingRef.current = false;
      }

      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }

      timeoutRef.current = setTimeout(() => {
        if (!leading) {
          callback(...args);
        }
        leadingRef.current = true;
      }, delay);
    },
    [callback, delay, leading]
  ) as T;

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return debouncedCallback;
}

const SearchInput = () => {
  const [query, setQuery] = useState('');

  const handleSearch = useDebounce((value: string) => {
    console.log('Searching for:', value);
  }, { delay: 500 });

  return (
    <input
      value={query}
      onChange={(e) => {
        setQuery(e.target.value);
        handleSearch(e.target.value);
      }}
    />
  );
};

interface IUser {
  id: number;
  name: string;
}

const Component = () => {
  const [user, setUser] = useState<IUser | null>(null);

  if (!user) {
    return <div>Loading...</div>;
  }

  return <div>{user.name}</div>;
};

import { ReactNode } from 'react';

interface ICardProps {
  children: ReactNode;
  title: string;
}

const Card = ({ children, title }: ICardProps) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
};

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  if (inputRef.current) {
    inputRef.current.focus();
  }
}, []);

return <input ref={inputRef} />;

const countRef = useRef<number>(0);
countRef.current = 1;

import type { ChangeEvent, FormEvent } from 'react';

const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  const formData = new FormData(e.currentTarget);
  console.log(formData.get('username'));
};

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
  console.log(e.target.value);
};

<form onSubmit={handleSubmit}>
  <input name="username" onChange={handleChange} />
</form>

import type { ComponentProps } from 'react';

interface IButtonProps extends ComponentProps<'button'> {
  variant?: 'primary' | 'secondary';
}

const Button = ({ variant = 'primary', ...props }: IButtonProps) => {
  return (
    <button
      className={`btn btn-${variant}`}
      {...props}
    />
  );
};

type MyButtonProps = ComponentProps<typeof Button>;

interface IGreetingProps {
  name?: string;
  count?: number;
}

const Greeting = ({ name = 'Guest', count = 1 }: IGreetingProps) => {
  return (
    <div>
      Hello, {name}! (Visit #{count})
    </div>
  );
};

interface ITableProps<T> {
  data: T[];
  columns: {
    key: keyof T;
    title: string;
    render?: (value: T[keyof T], record: T) => ReactNode;
  }[];
}

function Table<T extends Record<string, any>>({ data, columns }: ITableProps<T>) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map(col => <th key={String(col.key)}>{col.title}</th>)}
        </tr>
      </thead>
      <tbody>
        {data.map((row, idx) => (
          <tr key={idx}>
            {columns.map(col => (
              <td key={String(col.key)}>
                {col.render ? col.render(row[col.key], row) : String(row[col.key])}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

interface IUser {
  id: number;
  name: string;
  email: string;
}

<Table<IUser>
  data={users}
  columns={[
    { key: 'name', title: 'Name' },
    { key: 'email', title: 'Email' },
  ]}
/>

import { Button } from 'antd';
import type { ButtonProps } from 'antd';

interface IExtendedButtonProps extends ButtonProps {
  loading?: boolean;
  confirmText?: string;
}

const ExtendedButton = ({ loading, confirmText, ...props }: IExtendedButtonProps) => {
  return (
    <Button {...props} loading={loading}>
      {loading ? 'Loading...' : props.children}
    </Button>
  );
};

import { forwardRef } from 'react';

interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
}

const Input = forwardRef<HTMLInputElement, IInputProps>(
  ({ label, ...props }, ref) => {
    return (
      <div>
        {label && <label>{label}</label>}
        <input ref={ref} {...props} />
      </div>
    );
  }
);

Input.displayName = 'Input';

const Form = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  return <Input ref={inputRef} label="Username" />;
};

import { ComponentType, lazy, Suspense } from 'react';

interface IComponentMap {
  header: ComponentType<{ title: string }>;
  footer: ComponentType<{ links: string[] }>;
  sidebar: ComponentType<{ items: string[] }>;
}

const components: IComponentMap = {
  header: ({ title }) => <header>{title}</header>,
  footer: ({ links }) => <footer>{links.join(', ')}</footer>,
  sidebar: ({ items }) => <aside>{items.map(i => <p key={i}>{i}</p>)}</aside>,
};

type ComponentName = keyof IComponentMap;

const DynamicComponent = <N extends ComponentName>({
  name,
  ...props
}: { name: N } & React.ComponentProps<IComponentMap[N]>) => {
  const Component = components[name];
  return <Component {...props as any} />;
};

<DynamicComponent name="header" title="My App" />

interface IBaseComponentProps {
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

interface IClickableProps {
  onClick?: () => void;
  disabled?: boolean;
}

type ButtonBaseProps = IBaseComponentProps & IClickableProps;

interface IButtonProps extends ButtonBaseProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
}

src/
├── types/
│   ├── index.ts          # 统一导出
│   ├── common.ts         # 通用类型
│   ├── api.ts            # API 响应类型
│   └── components/       # 组件类型
│       ├── button.ts
│       └── form.ts
├── components/
│   └── Button/
│       ├── index.tsx
│       ├── Button.tsx
│       └── types.ts      # 组件私有类型